<template>
	<view class="content poRel">
		<view class="wid100 bacFFF">
			<view class="wid100 dis disAl" style="height: 80rpx;">
				<view class="wid90 mar dis disAl disJuC borRad40 hei60" style="background: #E5E5E5;">
					<view class="dis disJuC" style="width: 13%;">
						<uni-icons type="search" size="30rpx" color="#AFB6B1"></uni-icons>
					</view>
					<input class="wid85 foSi20" v-model="sousuo" @input="sousuoInput" placeholder="请输入系统订单号查询"
						placeholder-style="color: #AFB6B1;" />
				</view>
			</view>
			<scroll-view class="wid100 foSi25 fowe800" style="white-space: nowrap;" scroll-x="true">
				<view style="width: 1%;display: inline-block;"></view>
				<view class="hei86" style="display: inline-block;">
					<view class="dis disAl mar-left40 hei80" style="padding: 0 5rpx;" @click="xuanClick(0)"
						:style="xuan == 0?'border-bottom: 6rpx solid '+theme.main_color+';color: '+theme.main_color+';':'border-bottom: 6rpx solid #fff;color: #585858;'">
						全部</view>
				</view>
				<view class="hei86" style="display: inline-block;">
					<view class="dis disAl mar-left40 hei80" style="padding: 0 5rpx;" @click="xuanClick(1)"
						:style="xuan == 1?'border-bottom: 6rpx solid '+theme.main_color+';color: '+theme.main_color+';':'border-bottom: 6rpx solid #fff;color: #585858;'">
						已拒单</view>
				</view>
				<view class="hei86" style="display: inline-block;">
					<view class="dis disAl mar-left40 hei80" style="padding: 0 5rpx;" @click="xuanClick(2)"
						:style="xuan == 2?'border-bottom: 6rpx solid '+theme.main_color+';color: '+theme.main_color+';':'border-bottom: 6rpx solid #fff;color: #585858;'">
						待接单</view>
				</view>

				<view class="hei86" style="display: inline-block;">
					<view class="dis disAl mar-left40 hei80" style="padding: 0 5rpx;" @click="xuanClick(3)"
						:style="xuan == 3?'border-bottom: 6rpx solid '+theme.main_color+';color: '+theme.main_color+';':'border-bottom: 6rpx solid #fff;color: #585858;'">
						技师接单</view>
				</view>

				<view class="hei86" style="display: inline-block;">
					<view class="dis disAl mar-left40 hei80" style="padding: 0 5rpx;" @click="xuanClick(4)"
						:style="xuan == 4?'border-bottom: 6rpx solid '+theme.main_color+';color: '+theme.main_color+';':'border-bottom: 6rpx solid #fff;color: #585858;'">
						服务中</view>
				</view>
				<view class="hei86" style="display: inline-block;">
					<view class="dis disAl mar-left40 hei80" style="padding: 0 5rpx;" @click="xuanClick(5)"
						:style="xuan == 5?'border-bottom: 6rpx solid '+theme.main_color+';color: '+theme.main_color+';':'border-bottom: 6rpx solid #fff;color: #585858;'">
						已完成</view>
				</view>
			</scroll-view>
		</view>
		<scroll-view style="height: calc(100vh - 196rpx);" class="wid100" scroll-y="true" @scrolltolower="lower">
			<view style="height: 1rpx;"></view>
			<view v-if="list.length == 0" class="wid90 mar fowe800 foSi35">
				<view style="height: 50rpx;"></view>
				<view class="dis disJuC">
					<image src="../../static/zanwu2.png" style="width: 400rpx;height: 300rpx;"></image>
				</view>
				<view class="textCen mar-top20" style="color: #868686;">暂无数据</view>
			</view>
			<block v-for="(item,index) in list" :key="index">
				<view class="mar-top20 wid90 mar bacFFF borRad20">
					<view class="wid90 mar">
						<view class="hei80 dis disAl disJuB">
							<view class="foSi20" style="color: #5B5B5B;">订单号：{{item.order_id}}</view>
							<view class="foSi25 fowe800">
								<span style="color: red;" v-if="item.service_status == -3">退款售后</span>
								<span style="color: red;" v-if="item.service_status == -2">订单已取消</span>
								<span style="color: red;" v-if="item.service_status == -1">已拒单(待转单)</span>
								<span :style="'color: '+theme.main_color+';'" v-if="item.service_status == 0">待接单</span>
								<span :style="'color: '+theme.main_color+';'" v-if="item.service_status == 1">已接单</span>
								<span :style="'color: '+theme.main_color+';'" v-if="item.service_status == 2">已出发</span>
								<span :style="'color: '+theme.main_color+';'" v-if="item.service_status == 3">已到达</span>
								<span :style="'color: '+theme.main_color+';'"
									v-if="item.service_status == 4">开始服务</span>
								<span :style="'color: '+theme.main_color+';'" v-if="item.service_status == 5">已完成</span>
								<span :style="'color: '+theme.main_color+';'" v-if="item.service_status == 6">已完成</span>
							</view>
						</view>
						<view class="xia"></view>
						<view class="dis disAl wid100 mar-top30">
							<view class="wid25" style="height: 142rpx;">
								<image :src="item.cover_img" class="hei100 borRad10" style="width: 142rpx;"></image>
							</view>
							<view style="width: 75%;">
								<view class="dis disAl disJuB">
									<view class="foSi30 fowe800" style="line-height: 40rpx;">{{item.service.name}}
									</view>
									<view class="foSi25">×1</view>
								</view>
								<view class="foSi20" style="color: #878787;">
									<view class=" mar-top10">服务技师：{{item.tech_name}}</view>
									<view class=" mar-top10">预约时间：{{item.start_time}}</view>
									<view class=" mar-top10">
										<span>总计：</span>
										<span class="foSi25" style="color: #FF0000;">¥{{item.total_price}}</span>
									</view>
								</view>
							</view>
						</view>
						<view class="mar-top20 dis foSi20 wid100" style="justify-content: flex-end;">
							<view class="dis disAl disJuC mar-right20 butt1 cc"
								v-if="item.service_status == 0 || item.service_status == -1" @click="zhuandan(item.id)">转单</view>
							<view class="dis disAl disJuC mar-right20 butt1 cc" v-if="item.service_status == -1"
								@click="service_status_change(-2,index)">取消订单</view>
							<!-- <view class="dis disAl disJuC mar-right20 butt1">联系客户</view> -->
							<!-- <view class="dis disAl disJuC mar-right20 butt1 cc"
								v-if="item.service_status >= 5 && item.is_shieid == 0" @click.stop="pingbi(index)">屏蔽Ta
							</view> -->
							<view class="dis disAl disJuC coFFF butt2 cc" v-if="item.service_status == 0"
								@click.stop="service_status_change(1,index)"
								:style="'background-color: '+theme.main_color+';border: 1rpx solid '+theme.main_color+';'">
								技师接单</view>
							<view class="dis disAl disJuC coFFF butt2 cc" v-if="item.service_status == 1"
								@click.stop="service_status_change(2,index)"
								:style="'background-color: '+theme.main_color+';border: 1rpx solid '+theme.main_color+';'">
								技师出发</view>
							<view class="dis disAl disJuC coFFF butt2 cc" v-if="item.service_status == 2"
								@click.stop="service_status_change(3,index)"
								:style="'background-color: '+theme.main_color+';border: 1rpx solid '+theme.main_color+';'">
								确认到达</view>
							<view class="dis disAl disJuC coFFF butt2 cc" v-if="item.service_status == 3"
								@click.stop="service_status_change(4,index)"
								:style="'background-color: '+theme.main_color+';border: 1rpx solid '+theme.main_color+';'">
								开始服务</view>
							<view class="dis disAl disJuC coFFF butt2 cc" v-if="item.service_status == 4"
								@click.stop="service_status_change(5,index)"
								:style="'background-color: '+theme.main_color+';border: 1rpx solid '+theme.main_color+';'">
								完成服务</view>
							<!-- 	<view class="dis disAl disJuC coFFF butt2" v-if="item.service_status == 5" @click.stop="service_status_change(6,index)"
								:style="'background-color: '+theme.main_color+';border: 1rpx solid '+theme.main_color+';'">评价客户</view> -->
						</view>
						<view style="height: 30rpx;"></view>
					</view>
				</view>
			</block>
			<view style="height: 50rpx;"></view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				url: this.global.url,
				timer: null,
				sousuo: '',
				last_page: 0,
				page: 1,
				list: [],
				theme: null,
				xuan: 0,
				reject_the_order: false, // 拒单同意
				out_order: false, // 退款取消订单
				tech_order:false, // 技师接单提示
			}
		},
		onShow() {
			this.list = []
			this.page = 1
			this.getdata()
		},
		onLoad() {
			this.theme = uni.getStorageSync('theme')
		},
		methods: {

			service_status_change(index, ind) {
				var that = this
				// 拒单
				if (index == -1) {
					console.log(that.reject_the_order)
					if (!that.reject_the_order) {
						uni.showModal({
							title: '提示',
							// 提示文字
							content: '确认拒绝该订单吗？拒单后仍可转单！',
							// 取消按钮的文字自定义
							cancelText: "取消",
							// 确认按钮的文字自定义
							confirmText: "确认拒单",
							//删除字体的颜色
							confirmColor: 'red',
							//取消字体的颜色
							cancelColor: '#000000',
							success: function(res) {
								if (res.confirm) {
									// 执行确认后的操作
									that.reject_the_order = true;
									that.service_status_change(index, ind)
								} else {
									// 执行取消后的操作
								}
							}
						})
						return false;
					}
				}

				if (index == -2) {
					if (!that.out_order) {
						uni.showModal({
							title: '提示',
							// 提示文字
							content: '确认取消该订单吗？取消后将全额退款！',
							// 取消按钮的文字自定义
							cancelText: "取消",
							// 确认按钮的文字自定义
							confirmText: "确认拒单",
							//删除字体的颜色
							confirmColor: 'red',
							//取消字体的颜色
							cancelColor: '#000000',
							success: function(res) {
								if (res.confirm) {
									// 执行确认后的操作
									that.out_order = true;
									that.service_status_change(index, ind)
								} else {
									// 执行取消后的操作
								}
							}
						})
						return false;
					}
				}
				if (index == 1) {
					if (!that.tech_order) {
						uni.showModal({
							title: '提示',
							// 提示文字
							content: '确认代技师接单吗！',
							// 取消按钮的文字自定义
							cancelText: "取消",
							// 确认按钮的文字自定义
							confirmText: "确认接单",
							//删除字体的颜色
							confirmColor: 'red',
							//取消字体的颜色
							cancelColor: '#000000',
							success: function(res) {
								if (res.confirm) {
									// 执行确认后的操作
									that.tech_order = true;
									that.service_status_change(index, ind)
								} else {
									// 执行取消后的操作
								}
							}
						})
						return false;
					}
				}



				uni.showLoading({
					title: '加载中'
				})
				uni.request({
					url: that.global.url + 'api/qianyu_smfw/agent/order_change',
					method: 'POST',
					header: {
						'site-id': that.global.site_id,
						'token': uni.getStorageSync('token')
					},
					data: {
						tech_id: uni.getStorageSync('tech_id'),
						orderid: that.list[ind]['id'],
						service_status: index,
						arrive_img: that.arrive_img,
						end_service_img: that.end_service_img,
						lon: uni.getStorageSync('js_lon'),
						lat: uni.getStorageSync('js_lat'),
					},
					success(res) {
						// 恢复默认值
						that.reject_the_order = false;
						that.out_order = false
						that.tech_order = false
						
						
						let result = res.data
					
						console.log(result)
						if (result.code == 1) {
							that.list[ind]['service_status'] = result.data

							
							
						} else {
							uni.showToast({
								title: result.msg,
								icon: 'none',
								duration: 2000
							})
						}
					},
					complete() {
						uni.hideLoading()
					}
				})
			},

			zhuandan(orderid){
				let that = this
				uni.showModal({
					title: '提示',
					// 提示文字
					content: '确认转出该订单吗，转出后该订单收益将转为新技师所属代理商下',
					// 取消按钮的文字自定义
					cancelText: "取消",
					// 确认按钮的文字自定义
					confirmText: "确认转单",
					//删除字体的颜色
					confirmColor: 'red',
					//取消字体的颜色
					cancelColor: '#000000',
					success: function(res) {
						if (res.confirm) {
							// 执行确认后的操作
							uni.navigateTo({
								url:'/pages/agent/rejectSingle?orderid='+orderid
							})
						} else {
							// 执行取消后的操作
						}
					}
				})
				
			},

			getdata() {
				let that = this
				uni.showLoading({
					title: '加载中...'
				})
				uni.request({
					url: that.global.url + 'api/qianyu_smfw/agent/order_list',
					method: "POST",
					header: {
						'site-id': that.global.site_id, //自定义请求头信息
						'token': uni.getStorageSync('token')
					},
					data: {
						agent_id: uni.getStorageSync('agent_id'),
						service_status: that.xuan,
						keyword: that.sousuo,
						ordertype:1
					},
					success(res) {
						let result = res.data
						console.log(result.data)
						if (result.code == 1) {
							// that.agent_info = result.data
							that.list = that.list.concat(result.data.data)
							that.last_page = result.data.last_page
						} else {
							uni.showToast({
								title: result.msg,
								//将值设置为 success 或者直接不用写icon这个参数
								icon: 'error',
								//显示持续时间为 2秒
								duration: 2000
							})
						}
					},
					complete() {
						uni.hideLoading()
					}
				})
			},
			xuanClick(index) {
				if (this.xuan != index) {
					this.xuan = index
				}
				this.page = 1
				this.list = []
				this.getdata()
			},
			sousuoInput: function(event) {
				var that = this
				if (that.timer !== null) clearTimeout(that.timer)
				that.timer = setTimeout(() => {
					that.sousuo = event.target.value
					console.log(that.sousuo)
					this.page = 1
					this.list = []
					this.getdata()
				}, 1000)
			},
			lower(e) {
				if (this.last_page > this.page) {
					this.page++
					this.getList()
				}
			},
			getList() {

			},
			tiaozhuan(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style>
	.content {
		min-height: 100vh;
		background-color: #F3F1F1;
	}

	.xia {
		height: 1rpx;
		background-color: #E5E5E5;
	}

	.butt1 {
		width: 120rpx;
		height: 40rpx;
		color: #414040;
		border: 1rpx solid #414141;
		border-radius: 8rpx;
	}

	.cc {
		line-height: 40rpx;
	}

	.butt2 {
		width: 120rpx;
		height: 40rpx;
		border-radius: 8rpx;
	}
</style>